<script lang="ts" setup>
import { Right, Horizontal, Home, Shop, People, Setting, Message, Order } from "@nutui/icons-vue";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import "@nutui/icons-vue/dist/style_iconfont.css";
import { useRouter, useRoute } from "vue-router";
import gsap from "gsap";
import { useUserStore } from "@/store/modules/user";

// 引入路由
const router = useRouter();
const route = useRoute();

const userStore = useUserStore();

// gsap
gsap.registerPlugin(ScrollTrigger);
const titleBarRef = ref<HTMLDivElement>();
const scrollerRef = ref<HTMLDivElement>();
const triggerRef = ref<HTMLDivElement>();
const hideTitleBar = computed(() => route.path === "/");
onMounted(() => {
  hideTitleBar.value &&
    gsap.from(titleBarRef.value!, {
      scrollTrigger: {
        trigger: triggerRef.value,
        scroller: scrollerRef.value,
        markers: false,
        start: "top",
        end: "top -54px",
        scrub: true,
        toggleActions: "restart none none reverse",
      },
      opacity: 0,
    });
});

const menuVisible = ref(false);
const handleMenuClick = () => {
  menuVisible.value = !menuVisible.value;
};

const menus = [
  {
    name: "首页",
    icon: markRaw(Home),
    path: "/",
  },
  {
    name: "驾校介绍",
    icon: markRaw(Shop),
    path: "/school/about",
  },
  {
    name: "驾校教练",
    icon: markRaw(People),
    path: "/school/coach",
  },
  {
    name: "报名指南",
    icon: markRaw(Order),
    path: "/school/guide",
  },
  {
    name: "新闻中心",
    icon: markRaw(Message),
    path: "/news",
  },
  {
    name: "驾校环境",
    icon: markRaw(Setting),
    path: "/school/environment",
  },
];

const goto = (path: string) => {
  menuVisible.value = false;
  path && router.push(path);
};
</script>

<template>
  <div class="relative h-full of-x-hidden">
    <!-- 顶部栏 -->
    <div
      ref="titleBarRef"
      class="absolute top-0 left-0 right-0 h-14 flex items-center justify-center bg-white shadow z-10 duration-300"
      :class="{ 'translate-x-4/5': menuVisible }"
    >
      <div class="absolute left-6 top-1/2 -translate-y-1/2">
        <!-- 控制侧边栏 -->
        <Horizontal @click="handleMenuClick" />
      </div>
      <div class="">{{ userStore.tenantInfo?.schoolName }}</div>
    </div>

    <!-- 滚动区域 -->
    <div ref="scrollerRef" class="h-full of-x-hidden of-y-auto bg-gray-1 duration-300" :class="{ 'translate-x-4/5': menuVisible }">
      <!-- 顶部栏占位 -->
      <div v-if="!hideTitleBar" class="h-14"></div>
      <div ref="triggerRef" class="h-full">
        <RouterView />
        <!-- 版权信息 -->
        <div class="p-5 flex flex-col items-center gap-1 c-gray-4">
          <p class="font-bold">江西乐平成功驾校</p>
          <p class="text-sm">联系方式：4008591619</p>
          <p class="text-sm text-center">地址：江西省乐平市后港镇昱鹰高速挂线中段<br />(后港镇敬老院旁)</p>
        </div>
      </div>
    </div>

    <!--侧边栏 -->
    <div class="absolute top-0 left-0 h-full w-4/5 flex-wrap bg-slate-900 duration-300" :class="{ '-translate-x-full': !menuVisible }">
      <div class="grid grid-cols-2">
        <div v-for="item in menus" :key="item.name" class="flex items-center h-18 p-3 text-stone-200" @click="goto(item.path)">
          <component :is="item.icon" />
          <p class="pl-3 text-slate-50">{{ item.name }}</p>
        </div>
      </div>
    </div>
  </div>
</template>
